<template>
<!-- 电子数据管理 -->
  <div class="content-center">
    <div class="content-cotainer border-box">
        <!-- 面包屑 -->
        <breadcrumb />
        <!-- 页面内容-->
        <div class="audit-content">
          <!-- 页面title -->
            <div class="centent-title">
                <span>{{$route.meta.title}}</span>
            </div>
            <!-- 页面主体 -->
            <div class="centent-inner">
            
            <div v-if="$route.params.id == 2">
              <div class="revie-head">
                <div class="drop-down-wrap">
                  <el-dropdown split-button type="primary" trigger="click" @click="handleClick1">
                    发送数据
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item  v-for="(item,index) in downList1" :key="index" @click.native="select1(item,index)">{{item.label}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="drop-down-wrap">
                  <el-dropdown split-button type="primary" trigger="click" @click="handleClick2">
                    查看数据
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item  v-for="(item,index) in downList2" :key="index" @click.native="select2(item,index)">{{item.label}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>        
                <div class="drop-down-wrap">
                  <el-dropdown split-button type="primary" trigger="click" @click="handleClick3">
                    数据分析
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item  v-for="(item,index) in downList3" :key="index" @click.native="select3(item,index)">{{item.label}}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>

                <div class="btns">
                  <strong v-for="(item,index) in btns" :key="index">
                    <span>{{item.btn}}</span>    
                  </strong>
                </div>
              </div>

              <div class="revie-main">
                <div class="main-head">
                  <span>2003年测试单位1的2003企业</span>
                  <span>分录数：219</span>
                  <span>货币单元：元</span>               
                </div>

                <div class="inner-table">
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%;"
                    height="440"
                    @selection-change="handleSelectionChange"
                    @cell-dblclick="dblCell">      
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      type="index"
                      label="序号"
                      width="50">
                    </el-table-column>
                    <el-table-column
                      label="日期"
                      width="120">
                      <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="地址"
                      show-overflow-tooltip>
                    </el-table-column>
                  </el-table>
                </div>

                <div class="inner-pagination">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000"
                    @current-change="handleCurrentChange"
                  ></el-pagination>
                  <div>
                    当前第<span class="border">{{currentPage}}</span>页/每页{{pageNum}}条，共{{totalPage}}条 
                  </div>
                </div>
              </div>  
            </div>
            

            <account1 v-if="$route.params.id == 1" />

            <account2 v-if="$route.params.id == 3" />
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb'
import account1 from './account1'
import account2 from './account2'
export default {
  data(){
    return {
      downList1:[
        {
          label:'lsb',
          id:0
        },
        {
          label:'hbr',
          id:1
        },
        {
          label:'aaa',
          id:2
        },
        {
          label:'bbb',
          id:3
        }
      ],
      downList2:[
        {
          label:'aaa',
          id:0
        },
        {
          label:'bbb',
          id:1
        },
        {
          label:'ccc',
          id:2
        },
        {
          label:'ddd',
          id:3
        }
      ],
      downList3:[
        {
          label:'asdas',
          id:0
        },
        {
          label:'asasfasv',
          id:1
        },
        {
          label:'aaafsasfasfa',
          id:2
        },
        {
          label:'bbgassddfgfdb',
          id:3
        }
      ],
      btns:[
        {
          btn:"显示查询条件",
          id:0
        },
        {
          btn:"生成分析数据",
          id:1
        },
        {
          btn:"发送至其他项目",
          id:2
        },
        {
          btn:"打开查询",
          id:3
        }
      ],
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      currentPage:'1',
      pageNum:'10',
      totalPage:'10'
    }
  },
  methods:{
    select1(item,index){
      console.log(item,index)
    },
    handleClick1() {
      alert('发送数据');
    },
    select2(item,index){
      console.log(item,index)
    },
    handleClick2() {
      alert('查看数据');
    },
    select3(item,index){
      console.log(item,index)
    },
    handleClick3() {
      alert('数据分析');
    },
    //选择table
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dblCell(val){
      console.log(val)
      this.$router.push({path:'/auditAnalysisPage/accountAnalysis/accountRevie/id/3'})
    },
    // 选择页码
    handleCurrentChange(val) {
      console.log(val);
    }
  },
  components:{
    breadcrumb,
    account1,
    account2
  }
};
</script>

<style lang="less" scoped>
  .content-cotainer{
    padding: 0 20px 20px 20px;
    height: 100%;
    .centent-inner{
      padding: 0 20px 20px 20px;
    }
  }
  .revie-head{
    display: flex;
    align-items: center;
    height: 72px;
    &>div{
      margin-right: 20px;
    }
    .btns{
      &>strong{
        margin-right: 20px;
        cursor: pointer;
        &>span:first-child{
          font-size: 14px;
          color: #455F85;
          text-decoration: underline;
        }
      }
    }
  }

  .revie-main{
    .main-head{
      height: 34px;
      font-size: 16px;
      color: #333333;
      &>span{
        margin-right: 20px;
      }
      &>span:last-child{
        text-align: right;
      }
    }
    .inner-table{
      margin-bottom: 20px;
    }
    .inner-pagination {
      display: flex;
      & > div {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666666;
      }
      .border {
        display: block;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }
    }
  }
</style>